Reactã®experimental_SuspenseListã§é«åºŠãªããŒãã£ã³ã°æŠç¥ãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããããã®ã·ãŒã±ã³ã·ã£ã«ããã³è¡šç€ºã¬ã€ã¢ãŠããããã®å æ¬çã¬ã€ãã§æ¢ããŸãã
React experimental_SuspenseList: SuspenseããŒãã£ã³ã°ãã¿ãŒã³ããã¹ã¿ãŒãã
Reactã®experimental_SuspenseListã¯ãè€æ°ã®Suspenseã³ã³ããŒãã³ãã®è¡šç€ºã調æŽã§ãã匷åãªïŒãŸã å®éšçã§ããïŒã³ã³ããŒãã³ãã§ããããã«ãããããŒãã£ã³ã°ç¶æ
ããã现ããå¶åŸ¡ããæçµçã«ã¢ããªã±ãŒã·ã§ã³ã®äœæããã©ãŒãã³ã¹ãšãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããããšãã§ããŸãããã®ã¬ã€ãã§ã¯ãexperimental_SuspenseListã®ã³ã¢ã³ã³ã»ãããæ©èœãããã³å®è·µçãªå¿çšäŸãæ¢æ±ããReactã¢ããªã±ãŒã·ã§ã³ã§æŽç·ŽãããããŒãã£ã³ã°ãã¿ãŒã³ãå®è£
ã§ããããã«ããŸãã
Suspenseãšãã®éçãçè§£ãã
experimental_SuspenseListãæ·±ãæãäžããåã«ãReactã®Suspenseã®åºæ¬ãçè§£ããããšãäžå¯æ¬ ã§ããSuspenseã¯ãç¹å®ã®æ¡ä»¶ïŒéåžžã¯ããŒã¿èªã¿èŸŒã¿ïŒãæºãããããŸã§ã³ã³ããŒãã³ãã®ã¬ã³ããªã³ã°ããäžæåæ¢ããããããšãã§ããŸããäžæåæ¢ããå¯èœæ§ã®ããã³ã³ããŒãã³ããSuspenseå¢çã§ã©ããããåŸ
æ©äžã«äœãã¬ã³ããªã³ã°ããããæå®ããfallbackãããããæäŸããŸããäŸïŒ
import React, { Suspense } from 'react';
const ProfileDetails = React.lazy(() => import('./ProfileDetails'));
const ProfilePosts = React.lazy(() => import('./ProfilePosts'));
function ProfilePage() {
return (
<Suspense fallback={<p>ãããã£ãŒã«ãèªã¿èŸŒã¿äž...</p>}>
<ProfileDetails />
<Suspense fallback={<p>æçš¿ãèªã¿èŸŒã¿äž...</p>}>
<ProfilePosts />
</Suspense>
</Suspense>
);
}
Suspenseã¯åºæ¬çãªããŒãã£ã³ã°ã€ã³ãžã±ãŒã¿ãæäŸããŸãããããŒãã£ã³ã°ã€ã³ãžã±ãŒã¿ã衚瀺ãããé åºãå¶åŸ¡ããããšã¯ã§ããŸãããããã«ããããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãã¡ãã¯ãã«ãªãããšããããŸããProfileDetailsãšProfilePostsã³ã³ããŒãã³ããç¬ç«ããŠèªã¿èŸŒãŸããããããã®ããŒãã£ã³ã°ã€ã³ãžã±ãŒã¿ãç°ãªãã¿ã€ãã³ã°ã§ç¹æ»
ããã®ãæ³åããŠã¿ãŠãã ãããããã§experimental_SuspenseListã圹ç«ã¡ãŸãã
experimental_SuspenseListã®ç޹ä»
experimental_SuspenseListã䜿çšãããšãSuspenseå¢çã衚瀺ãããé åºã調æŽã§ããŸããããã¯äž»ã«revealOrderããããã«ãã£ãŠå¶åŸ¡ããã以äžã®äž»èŠãªåäœãæäŸããŸãïŒ
forwards: ã³ã³ããŒãã³ãããªãŒã«çŸããé åºã§Suspenseå¢çã衚瀺ããŸããbackwards: éã®é åºã§Suspenseå¢çã衚瀺ããŸããtogether: ãã¹ãŠã®Suspenseå¢çãåæã«è¡šç€ºããŸãã
experimental_SuspenseListã䜿çšããã«ã¯ãå®éšçæ©èœããµããŒãããReactããŒãžã§ã³ãå¿
èŠã§ããå®éšçæ©èœã®æå¹åãé¢é£ããèŠåã«é¢ããææ°æ
å ±ã«ã€ããŠã¯ãReactã®ããã¥ã¡ã³ããåç
§ããããšãäžå¯æ¬ ã§ãããŸããReactããã±ãŒãžããçŽæ¥ã€ã³ããŒãããå¿
èŠããããŸãïŒ
import { unstable_SuspenseList as SuspenseList } from 'react';
泚ïŒååã瀺ãããã«ãexperimental_SuspenseListã¯å®éšçãªæ©èœã§ããã倿Žãããå¯èœæ§ããããŸããæ¬çªç°å¢ã§ã®äœ¿çšã«ã¯æ³šæãå¿
èŠã§ãã
`revealOrder="forwards"`ã«ããã·ãŒã±ã³ã·ã£ã«ïŒé 次ïŒããŒãã£ã³ã°ã®å®è£
forwardsãšãã衚瀺é åºã¯ãããããexperimental_SuspenseListã®æãäžè¬çãªäœ¿çšäŸã§ããããã«ãããããŒãã£ã³ã°ã€ã³ãžã±ãŒã¿ãäºæž¬å¯èœã§é 次çãªæ¹æ³ã§è¡šç€ºããããã¹ã ãŒãºãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãçã¿åºãããšãã§ããŸããæ¬¡ã®äŸãèããŠã¿ãŸãããïŒ
import React, { Suspense, lazy } from 'react';
import { unstable_SuspenseList as SuspenseList } from 'react';
const ProfileHeader = lazy(() => import('./ProfileHeader'));
const ProfileDetails = lazy(() => import('./ProfileDetails'));
const ProfilePosts = lazy(() => import('./ProfilePosts'));
function ProfilePage() {
return (
<SuspenseList revealOrder="forwards">
<Suspense fallback={<p>ããããŒãèªã¿èŸŒã¿äž...</p>}>
<ProfileHeader />
</Suspense>
<Suspense fallback={<p>詳现ãèªã¿èŸŒã¿äž...</p>}>
<ProfileDetails />
</Suspense>
<Suspense fallback={<p>æçš¿ãèªã¿èŸŒã¿äž...</p>}>
<ProfilePosts />
</Suspense>
</SuspenseList>
);
}
ãã®äŸã§ã¯ãããŒãã£ã³ã°ã€ã³ãžã±ãŒã¿ã¯æ¬¡ã®é åºã§è¡šç€ºãããŸãïŒ
- "ããããŒãèªã¿èŸŒã¿äž..."
- "詳现ãèªã¿èŸŒã¿äž..." (ProfileHeaderãèªã¿èŸŒãŸããåŸã«è¡šç€º)
- "æçš¿ãèªã¿èŸŒã¿äž..." (ProfileDetailsãèªã¿èŸŒãŸããåŸã«è¡šç€º)
ããã«ãããããŒãã£ã³ã°ã€ã³ãžã±ãŒã¿ãã©ã³ãã ã«è¡šç€ºãããå¯èœæ§ã®ããSuspenseã®ããã©ã«ãã®åäœãšæ¯èŒããŠãããæŽçãããã¡ãã¯ããã®å°ãªãããŒãã£ã³ã°ãšã¯ã¹ããªãšã³ã¹ãçãŸããŸãã
`revealOrder="backwards"`ã«ããéé ã·ãŒã±ã³ã·ã£ã«ããŒãã£ã³ã°
backwardsãšãã衚瀺é åºã¯ãããŒãžã®äžéšã«ããèŠçŽ ã®èªã¿èŸŒã¿ãæåã«åªå
ãããã·ããªãªã§åœ¹ç«ã¡ãŸããããã¯ãããŒãžã®ããã«äžã«ããå Žåã§ããæãéèŠãªã³ã³ãã³ããè¿
éã«è¡šç€ºãããå Žåã«æãŸãããããããŸãããäžèšã®åãäŸã䜿çšããŠãrevealOrderã`backwards`ã«å€æŽããŸãïŒ
<SuspenseList revealOrder="backwards">
<Suspense fallback={<p>ããããŒãèªã¿èŸŒã¿äž...</p>}>
<ProfileHeader />
</Suspense>
<Suspense fallback={<p>詳现ãèªã¿èŸŒã¿äž...</p>}>
<ProfileDetails />
</Suspense>
<Suspense fallback={<p>æçš¿ãèªã¿èŸŒã¿äž...</p>}>
<ProfilePosts />
</Suspense>
</SuspenseList>
ããŒãã£ã³ã°ã€ã³ãžã±ãŒã¿ã¯æ¬¡ã®é åºã§è¡šç€ºãããããã«ãªããŸãïŒ
- "æçš¿ãèªã¿èŸŒã¿äž..."
- "詳现ãèªã¿èŸŒã¿äž..." (ProfilePostsãèªã¿èŸŒãŸããåŸã«è¡šç€º)
- "ããããŒãèªã¿èŸŒã¿äž..." (ProfileDetailsãèªã¿èŸŒãŸããåŸã«è¡šç€º)
ã¢ããªã±ãŒã·ã§ã³ã¯ãæçš¿ã»ã¯ã·ã§ã³ã®èªã¿èŸŒã¿ãåªå ããããšã§ãæå°éã®æ©èœçãªãšã¯ã¹ããªãšã³ã¹ãããéãæäŸã§ããå¯èœæ§ããããŸããããã¯ããŠãŒã¶ãŒãéåžžãææ°ã®æçš¿ãããã«èŠãããã«äžã«ã¹ã¯ããŒã«ããå Žåã«äŸ¿å©ã§ãã
`revealOrder="together"`ã«ããåæããŒãã£ã³ã°
togetherãšãã衚瀺é åºã¯ããã¹ãŠã®ããŒãã£ã³ã°ã€ã³ãžã±ãŒã¿ãåæã«è¡šç€ºããã ãã§ããããã¯çŽæã«åããããã«æãããããããŸããããç¹å®ã®ã·ããªãªã§åœ¹ç«ã€ããšããããŸããäŸãã°ããã¹ãŠã®ã³ã³ããŒãã³ãã®èªã¿èŸŒã¿æéãæ¯èŒççãå Žåããã¹ãŠã®ããŒãã£ã³ã°ã€ã³ãžã±ãŒã¿ãäžåºŠã«è¡šç€ºããããšã§ãããŒãžå
šäœãèªã¿èŸŒã¿äžã§ããããšãèŠèŠçã«ç€ºãããšãã§ããŸãã
<SuspenseList revealOrder="together">
<Suspense fallback={<p>ããããŒãèªã¿èŸŒã¿äž...</p>}>
<ProfileHeader />
</Suspense>
<Suspense fallback={<p>詳现ãèªã¿èŸŒã¿äž...</p>}>
<ProfileDetails />
</Suspense>
<Suspense fallback={<p>æçš¿ãèªã¿èŸŒã¿äž...</p>}>
<ProfilePosts />
</Suspense>
</SuspenseList>
ãã®å Žåã3ã€ã®ããŒãã£ã³ã°ã¡ãã»ãŒãžïŒãããããŒãèªã¿èŸŒã¿äž...ããã詳现ãèªã¿èŸŒã¿äž...ããããã³ãæçš¿ãèªã¿èŸŒã¿äž...ãïŒããã¹ãŠåæã«è¡šç€ºãããŸãã
`tail`ã«ãã衚瀺å¶åŸ¡
experimental_SuspenseListã¯tailãšããå¥ã®ãããããæäŸããŸããããã¯ãåŸç¶ã®ã¢ã€ãã ããŸã èªã¿èŸŒã¿äžã§ããéã«ããã§ã«è¡šç€ºãããã¢ã€ãã ãã©ã®ããã«æ¯ãèãããå¶åŸ¡ããŸããæ¬¡ã®2ã€ã®å€ãåãå
¥ããŸãïŒ
suspense: ãã§ã«è¡šç€ºãããã¢ã€ãã ãããã©ãŒã«ããã¯ä»ãã®Suspenseå¢çã§ã©ãããããŸããããã«ããããªã¹ãå ã®ãã¹ãŠã®ã¢ã€ãã ãèªã¿èŸŒãŸãããŸã§ããããã广çã«å床é衚瀺ã«ããŸããcollapsed: åŸç¶ã®ã¢ã€ãã ãèªã¿èŸŒãŸããŠããéããã§ã«è¡šç€ºãããã¢ã€ãã ã¯è¡šç€ºããããŸãŸã«ãªããŸããããã¯tailãããããæå®ãããŠããªãå Žåã®ããã©ã«ãã®åäœã§ãã
tail="suspense"ãªãã·ã§ã³ã¯ãç¹ã«ç°ãªãã³ã³ããŒãã³ãã®èªã¿èŸŒã¿æéã倧å¹
ã«ç°ãªãå Žåã«ãããèŠèŠçã«äžè²«æ§ã®ããããŒãã£ã³ã°ãšã¯ã¹ããªãšã³ã¹ãäœæããã®ã«åœ¹ç«ã¡ãŸããProfileHeaderã¯ããã«èªã¿èŸŒãŸããããProfilePostsã«ã¯é·ãæéããããã·ããªãªãæ³åããŠã¿ãŠãã ãããtail="suspense"ãªãã·ã§ã³ããªããšããŠãŒã¶ãŒã¯ããããŒãããã«è¡šç€ºããããã®åŸãæçš¿ãèªã¿èŸŒãŸãããŸã§ã«é·ãéåŸ
ã€ããšã«ãªããŸããããã¯ãŸãšãŸãããªãããã«æããããå¯èœæ§ããããŸãã
tail="suspense"ã䜿çšãããšãæçš¿ãèªã¿èŸŒãŸãããŸã§ããããŒãé衚瀺ã®ãŸãŸïŒãŸãã¯ãã©ãŒã«ããã¯ã衚瀺ãããïŒã«ãªããããã·ãŒã ã¬ã¹ãªç§»è¡ãå®çŸããŸãã
<SuspenseList revealOrder="forwards" tail="suspense">
<Suspense fallback={<p>ããããŒãèªã¿èŸŒã¿äž...</p>}>
<ProfileHeader />
</Suspense>
<Suspense fallback={<p>詳现ãèªã¿èŸŒã¿äž...</p>}>
<ProfileDetails />
</Suspense>
<Suspense fallback={<p>æçš¿ãèªã¿èŸŒã¿äž...</p>}>
<ProfilePosts />
</Suspense>
</SuspenseList>
SuspenseListã®ãã¹ã
experimental_SuspenseListã³ã³ããŒãã³ãã¯ãã¹ãïŒå
¥ãåã«ïŒããŠãããã«è€éãªããŒãã£ã³ã°ãã¿ãŒã³ãäœæã§ããŸããããã«ãããé¢é£ããã³ã³ããŒãã³ããã°ã«ãŒãåãããããã®ããŒãã£ã³ã°åäœãç¬ç«ããŠå¶åŸ¡ã§ããŸããäŸãã°ãããŒãžã®å
šäœçãªã¬ã€ã¢ãŠããå¶åŸ¡ããã¡ã€ã³ã®SuspenseListããããåã»ã¯ã·ã§ã³å
ã«ãã¹ããããSuspenseListã³ã³ããŒãã³ãããã£ãŠããã®ã»ã¯ã·ã§ã³å
ã®åã
ã®èŠçŽ ã®èªã¿èŸŒã¿ãå¶åŸ¡ããããšãã£ãããšãå¯èœã§ãã
import React, { Suspense, lazy } from 'react';
import { unstable_SuspenseList as SuspenseList } from 'react';
const ProfileHeader = lazy(() => import('./ProfileHeader'));
const ProfileDetails = lazy(() => import('./ProfileDetails'));
const ProfilePosts = lazy(() => import('./ProfilePosts'));
const AdBanner = lazy(() => import('./AdBanner'));
const RelatedArticles = lazy(() => import('./RelatedArticles'));
function ProfilePage() {
return (
<SuspenseList revealOrder="forwards">
<Suspense fallback={<p>ããããŒãèªã¿èŸŒã¿äž...</p>}>
<ProfileHeader />
</Suspense>
<div>
<SuspenseList revealOrder="forwards">
<Suspense fallback={<p>詳现ãèªã¿èŸŒã¿äž...</p>}>
<ProfileDetails />
</Suspense>
<Suspense fallback={<p>æçš¿ãèªã¿èŸŒã¿äž...</p>}>
<ProfilePosts />
</Suspense>
</SuspenseList>
</div>
<Suspense fallback={<p>åºåãèªã¿èŸŒã¿äž...</p>}>
<AdBanner />
</Suspense>
<Suspense fallback={<p>é¢é£èšäºãèªã¿èŸŒã¿äž...</p>}>
<RelatedArticles />
</Suspense>
</SuspenseList>
);
}
ãã®äŸã§ã¯ãæåã«ProfileHeaderãèªã¿èŸŒãŸããæ¬¡ã«ProfileDetailsãšProfilePostsãæåŸã«AdBannerãšRelatedArticlesãèªã¿èŸŒãŸããŸããå
åŽã®SuspenseListã¯ãProfilePostsã®åã«ProfileDetailsãèªã¿èŸŒãŸããããšãä¿èšŒããŸãããã®ã¬ãã«ã®ããŒãã£ã³ã°é åºã®å¶åŸ¡ã¯ãã¢ããªã±ãŒã·ã§ã³ã®äœæããã©ãŒãã³ã¹ãšå¿çæ§ã倧å¹
ã«åäžãããããšãã§ããŸãã
å®äžçã®äŸãšåœéçãªèæ ®äºé
experimental_SuspenseListã®å©ç¹ã¯ãããŸããŸãªã¢ããªã±ãŒã·ã§ã³ã¿ã€ããåœéçãªãŠãŒã¶ãŒããŒã¹ã«åã³ãŸãã以äžã®ã·ããªãªãèããŠã¿ãŸãããïŒ
- Eã³ããŒã¹ãã©ãããã©ãŒã ïŒã°ããŒãã«ãªEã³ããŒã¹ãµã€ãã§ã¯ã
experimental_SuspenseListã䜿çšããŠãã¬ãã¥ãŒã®åã«ååç»åãšèª¬æã®èªã¿èŸŒã¿ãåªå ããããŠãŒã¶ãŒãå©çšå¯èœãªååãè¿ éã«é²èЧã§ããããã«ããŸãã`revealOrder="forwards"`ã䜿çšããããšã§ãäžçäžã®ãŠãŒã¶ãŒãè³Œå ¥æ±ºå®ãäžãäžã§éèŠãªãäž»èŠãªåå詳现ãæåã«èªã¿èŸŒãŸããããšãä¿èšŒã§ããŸãã - ãã¥ãŒã¹ãµã€ãïŒè€æ°ã®åœã®èªè
ã«ãµãŒãã¹ãæäŸãããã¥ãŒã¹ãµã€ãã§ã¯ã
experimental_SuspenseListã䜿çšããŠãéèŠåºŠã®äœãã³ã³ãã³ãã®åã«éå ±ãã¥ãŒã¹ã®èŠåºãã®èªã¿èŸŒã¿ãåªå ããããŠãŒã¶ãŒãéèŠãªã€ãã³ãã«ã€ããŠå³åº§ã«æ å ±ãåŸãããããã«ããŸããå°ååºæã®ãã¥ãŒã¹ã«åºã¥ããŠèªã¿èŸŒã¿é åºã調æŽããããšãå®è£ å¯èœã§ãã - ãœãŒã·ã£ã«ã¡ãã£ã¢ã¢ããªã±ãŒã·ã§ã³ïŒãœãŒã·ã£ã«ã¡ãã£ã¢ãã©ãããã©ãŒã ã§ã¯ã
experimental_SuspenseListã䜿çšããŠããããã£ãŒã«åçãšãŠãŒã¶ãŒåããå§ãŸããæ¬¡ã«ãŠãŒã¶ãŒè©³çŽ°ãšæè¿ã®æçš¿ãšããé åºã§ãŠãŒã¶ãŒãããã£ãŒã«ãé æ¬¡èªã¿èŸŒãããšãã§ããŸããããã«ãããç¹ã«ã€ã³ã¿ãŒãããé床ãç°ãªãå°åã«ãããŠãåæã®äœæããã©ãŒãã³ã¹ãšãŠãŒã¶ãŒãšã³ã²ãŒãžã¡ã³ããåäžããŸãã - ããã·ã¥ããŒããšåæããŒã«ïŒããŸããŸãªãœãŒã¹ïŒäŸïŒGoogle AnalyticsãSalesforceãå
éšããŒã¿ããŒã¹ïŒããã®ããŒã¿ã衚瀺ããããã·ã¥ããŒãã§ã¯ã
experimental_SuspenseListãããŸããŸãªããŒã¿å¯èŠåã®èªã¿èŸŒã¿ã調æŽã§ããŸããããã«ãããç¹ã«äžéšã®ããŒã¿ãœãŒã¹ãä»ãããé ãå Žåã«ãã¹ã ãŒãºãªããŒãã£ã³ã°ãšã¯ã¹ããªãšã³ã¹ãä¿èšŒãããŸãããŸãäž»èŠæ¥çžŸè©äŸ¡ææšïŒKPIïŒã衚瀺ããæ¬¡ã«è©³çްãªãã£ãŒããã°ã©ãã衚瀺ããããšãã£ãããšãå¯èœã§ãã
ã°ããŒãã«ãªãªãŒãã£ãšã³ã¹åãã«éçºããå Žåãexperimental_SuspenseListãå®è£
ããéã«ã¯ã以äžã®åœéåïŒi18nïŒèŠå ãèæ
®ããŠãã ããïŒ
- ãããã¯ãŒã¯é
å»¶ïŒç°ãªãå°ççãªå Žæã«ãããŠãŒã¶ãŒã¯ãããŸããŸãªãããã¯ãŒã¯é
å»¶ãçµéšããå¯èœæ§ããããŸãã
experimental_SuspenseListã䜿çšããŠããŠãŒã¶ãŒã«ãšã£ãŠæãéèŠãªã³ã³ãã³ãã®èªã¿èŸŒã¿ãåªå ããããããã¯ãŒã¯ç¶æ³ã«é¢ãããã劥åœãªåæãšã¯ã¹ããªãšã³ã¹ãä¿èšŒããŸãã - ããã€ã¹ã®èœåïŒããŸããŸãªåœã®ãŠãŒã¶ãŒã¯ãåŠçèœåãç»é¢ãµã€ãºãç°ãªãããŸããŸãªããã€ã¹ã䜿çšããŠã¢ããªã±ãŒã·ã§ã³ã«ã¢ã¯ã»ã¹ããå¯èœæ§ããããŸãã䜿çšãããŠããããã€ã¹ã«æãé¢é£æ§ã®é«ãã³ã³ãã³ããåªå ããããã«ãèªã¿èŸŒã¿é åºãæé©åããŸãã
- èšèªãšããŒã«ã©ã€ãŒãŒã·ã§ã³ïŒããŒãã£ã³ã°ã€ã³ãžã±ãŒã¿ãšãã©ãŒã«ããã¯ã³ã³ãã³ãããããŸããŸãªèšèªãå°åã«åãããŠé©åã«ç¿»èš³ããã³ããŒã«ã©ã€ãºãããŠããããšã確èªããŸããã¢ã©ãã¢èªãããã©ã€èªã®ãããªèšèªã®ããã«ãããã¹ãã®æ¹åïŒå·Šããå³ãŸãã¯å³ããå·ŠïŒã«é©å¿ãããã¬ãŒã¹ãã«ããŒã®äœ¿çšãæ€èšããŠãã ããã
experimental_SuspenseListãšReact Routerã®çµã¿åãã
experimental_SuspenseListã¯React Routerãšã·ãŒã ã¬ã¹ã«é£æºããã«ãŒãå
šäœãšãã®é¢é£ã³ã³ããŒãã³ãã®èªã¿èŸŒã¿ã管çã§ããŸããã«ãŒãã³ã³ããŒãã³ããSuspenseå¢çã§ã©ããããexperimental_SuspenseListã䜿çšããŠãããã®ã«ãŒãã®èªã¿èŸŒã¿é åºãå¶åŸ¡ã§ããŸãã
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { unstable_SuspenseList as SuspenseList } from 'react';
const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));
const Contact = lazy(() => import('./Contact'));
function App() {
return (
<Router>
<SuspenseList revealOrder="forwards">
<Suspense fallback={<p>ããŒã ããŒãžãèªã¿èŸŒã¿äž...</p>}>
<Route exact path="/" component={Home} />
</Suspense>
<Suspense fallback={<p>æŠèŠããŒãžãèªã¿èŸŒã¿äž...</p>}>
<Route path="/about" component={About} />
</Suspense>
<Suspense fallback={<p>ãåãåããããŒãžãèªã¿èŸŒã¿äž...</p>}>
<Route path="/contact" component={Contact} />
</Suspense>
</SuspenseList>
</Router>
);
}
ãã®äŸã§ã¯ããŠãŒã¶ãŒãå¥ã®ã«ãŒãã«ç§»åãããšã察å¿ããããŒãžãSuspenseå¢çå
ã§èªã¿èŸŒãŸããŸããexperimental_SuspenseListã¯ãåã«ãŒãã®ããŒãã£ã³ã°ã€ã³ãžã±ãŒã¿ãé æ¬¡è¡šç€ºãããããšãä¿èšŒããŸãã
ãšã©ãŒãã³ããªã³ã°ãšãã©ãŒã«ããã¯æŠç¥
Suspenseã¯ããŒãã£ã³ã°ç¶æ
ãåŠçããããã®fallbackãããããæäŸããŸããããšã©ãŒãã³ããªã³ã°ãèæ
®ããããšãéèŠã§ããã³ã³ããŒãã³ãã®èªã¿èŸŒã¿ã«å€±æããå ŽåãSuspenseå¢çããšã©ãŒããã£ããããŠãã©ãŒã«ããã¯ã衚瀺ããŸããããããããæ
å ±éã®å€ããšã©ãŒã¡ãã»ãŒãžãããŠãŒã¶ãŒãã³ã³ããŒãã³ãã®åèªã¿èŸŒã¿ã詊è¡ããæ¹æ³ãæäŸãããå Žåãããã§ãããã
useErrorBoundaryããã¯ïŒäžéšã®ãšã©ãŒããŠã³ããªã©ã€ãã©ãªã§å©çšå¯èœïŒã䜿çšããŠãSuspenseå¢çå
ã®ãšã©ãŒããã£ããããã«ã¹ã¿ã ãšã©ãŒã¡ãã»ãŒãžã衚瀺ã§ããŸãããŸãããŠãŒã¶ãŒãã³ã³ããŒãã³ãã®åèªã¿èŸŒã¿ã詊ã¿ãããšãã§ããããã«ãå詊è¡ã¡ã«ããºã ãå®è£
ããããšãã§ããŸãã
import React, { Suspense, lazy } from 'react';
import { useErrorBoundary } from 'react-error-boundary';
const MyComponent = lazy(() => import('./MyComponent'));
function MyComponentWrapper() {
const { showBoundary, reset } = useErrorBoundary();
if (showBoundary) {
return (
<div>
<p>MyComponentã®èªã¿èŸŒã¿äžã«ãšã©ãŒãçºçããŸããã</p>
<button onClick={reset}>å詊è¡</button>
</div>
);
}
return <MyComponent />;
}
function App() {
return (
<Suspense fallback={<p>èªã¿èŸŒã¿äž...</p>}>
<MyComponentWrapper />
</Suspense>
);
}
ããã©ãŒãã³ã¹ã«é¢ããèæ ®äºé ãšãã¹ããã©ã¯ãã£ã¹
experimental_SuspenseListã¯ã¢ããªã±ãŒã·ã§ã³ã®äœæããã©ãŒãã³ã¹ãåäžãããããšãã§ããŸããããããè³¢æã«äœ¿çšããããã©ãŒãã³ã¹ãžã®æœåšçãªåœ±é¿ãèæ
®ããããšãéèŠã§ãã
- é床ãªãã¹ããé¿ããïŒ
experimental_SuspenseListã³ã³ããŒãã³ãã®é床ãªãã¹ãã¯ãããã©ãŒãã³ã¹ã®ãªãŒããŒãããã«ã€ãªããå¯èœæ§ããããŸãããã¹ãã¬ãã«ãæå°éã«æãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«å€§ããªå©ç¹ãããããå Žåã«ã®ã¿experimental_SuspenseListã䜿çšããŠãã ããã - ã³ã³ããŒãã³ãã®èªã¿èŸŒã¿ãæé©åããïŒã³ãŒãåå²ãé
å»¶èªã¿èŸŒã¿ãªã©ã®æè¡ã䜿çšããŠãã³ã³ããŒãã³ããå¹ççã«èªã¿èŸŒãŸããããã«ããŸããããã«ãããããŒãã£ã³ã°ç¶æ
ã§è²»ããããæéãæå°éã«æãããã
experimental_SuspenseListã®å šäœçãªåœ±é¿ã軜æžãããŸãã - é©åãªãã©ãŒã«ããã¯ã䜿çšããïŒè»œéã§èŠèŠçã«é
åçãªãã©ãŒã«ããã¯ãéžæããŸããè€éãªã³ã³ããŒãã³ãããã©ãŒã«ããã¯ãšããŠäœ¿çšããããšã¯é¿ããŠãã ãããããã¯
experimental_SuspenseListã®ããã©ãŒãã³ã¹äžã®å©ç¹ãç¡å¹ã«ããå¯èœæ§ããããŸããã·ã³ãã«ãªã¹ãããŒãããã°ã¬ã¹ããŒããŸãã¯ãã¬ãŒã¹ãã«ããŒã³ã³ãã³ãã®äœ¿çšãæ€èšããŠãã ããã - ããã©ãŒãã³ã¹ãç£èŠããïŒããã©ãŒãã³ã¹ç£èŠããŒã«ã䜿çšããŠãã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ã«å¯Ÿãã
experimental_SuspenseListã®åœ±é¿ã远跡ããŸããããã«ãããæœåšçãªããã«ããã¯ãç¹å®ããå®è£ ãæé©åããã®ã«åœ¹ç«ã¡ãŸãã
çµè«ïŒSuspenseããŒãã£ã³ã°ãã¿ãŒã³ã®æŽ»çš
experimental_SuspenseListã¯ãReactã¢ããªã±ãŒã·ã§ã³ã§æŽç·ŽãããããŒãã£ã³ã°ãã¿ãŒã³ãäœæããããã®åŒ·åãªããŒã«ã§ãããã®æ©èœãçè§£ããè³¢æã«äœ¿çšããããšã§ãç¹ã«ããŸããŸãªãããã¯ãŒã¯ç¶æ³ãæã€å€æ§ãªå°ççãªå Žæã«ãããŠãŒã¶ãŒã«ãšã£ãŠããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã倧å¹
ã«åäžãããããšãã§ããŸããã³ã³ããŒãã³ãã衚瀺ãããé åºãæŠç¥çã«å¶åŸ¡ããé©åãªãã©ãŒã«ããã¯ãæäŸããããšã§ãã°ããŒãã«ãªãªãŒãã£ãšã³ã¹ã«ãšã£ãŠãããã¹ã ãŒãºã§ãããé
åçã§ãæçµçã«ããæºè¶³ã®ãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãçã¿åºãããšãã§ããŸãã
experimental_SuspenseListããã®ä»ã®å®éšçæ©èœã«é¢ããææ°æ
å ±ã«ã€ããŠã¯ãåžžã«å
¬åŒã®Reactããã¥ã¡ã³ããåç
§ããããšãå¿ããªãã§ãã ãããæ¬çªç°å¢ã§å®éšçæ©èœã䜿çšããéã®æœåšçãªãªã¹ã¯ãšå¶éã«çæãããŠãŒã¶ãŒã«å±éããåã«å®è£
ã培åºçã«ãã¹ãããŠãã ããã